$(function () {
  // swiper 初始化
  var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal', // 垂直切换选项
    // loop: true, // 循环模式选项

    // 如果需要分页器
    // pagination: {
    //   el: '.swiper-pagination',
    // },

    // 如果需要前进后退按钮
    // navigation: {
    //   nextEl: '.swiper-button-next',
    //   prevEl: '.swiper-button-prev',
    // },

    // 如果需要滚动条
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
    // 一屏幕显示6个item
    slidesPerView: 6,
    // 每个item之间相隔20px
    spaceBetween: 10,
    // 自由模式，有惯性
    freeMode: true,
    observer: true,
    observeParents: true,
    observeSlideChildren: true,
  });

  // 动态 追加 item 
  // <div class="swiper-slide">Slide 1</div>

  for (var i = 0; i < TYPE_ARRAY.length; i++) {
    // es6 
    var str = `<div class="swiper-slide">${TYPE_ARRAY[i]}</div>`;
    $(".swiper-wrapper").append(str);
    // mySwiper.addSlide(i,str); //在index为i的位置插入一个slide
  }
  // 刷新后 定位到第一个
  mySwiper.update();

  // 网页一打开 默认 选中 头条
  $(".swiper-slide").eq(0).addClass("active");

  // 对 item 添加点击事件
  $(".swiper-slide").on('click', function () {
    // console.log("aaa");
    $(this).addClass('active').siblings().removeClass('active');
    // 获取 点击 item 的内容
    // console.log($(this).text());
    // 请求之前 清空元素
    $(".content").empty();
    sendRequest(TYPE_ARRAY_VALUE[$(this).index()]);
  });



  // 向后台发送请求，获取数据

  function sendRequest(type) {
    $.ajax({
      type: "GET",
      url: DEV_HOST,
      async:true,
      data: {
        type: type,
        key: KEY
      },
      dataType: "json",
      success: function (response) {
        console.log(response);
        formatData(response);
      },
      error: function (err) {
        console.log(err)
      }
    });
  }

  // function callback(data) {
  //   console.log(data);
  // }


  // 默认 去请求 "top"类型的数据
  sendRequest("top");

  // 解析 成功返回后的数据
  function formatData(response) {
    var dataArray = response.result.data;
    for (var i = 0; i < dataArray.length; i++) {
      var item = dataArray[i];
      var str = "";
      if(item.thumbnail_pic_s02){

        str= ` <div class="content-wrapper">
                          <h2>${item.title}</h2>
                          <a href="${item.url}"></a>
                          <ul>
                              <li><img src="${item.thumbnail_pic_s}" alt=""></li>
                              <li><img src="${item.thumbnail_pic_s02}" alt=""></li>
                              <li><img src="${item.thumbnail_pic_s03}" alt=""></li>
                          </ul>
                          <div class="extra-info">
                              <span class="author">${item.author_name}</span>
                              <span class="category">${item.category}</span>
                              <span class="date">${item.date}</span>
                              <span class="close">x</span>
                          </div>
                      </div>`;
      }else{
        str = `<div class="content-wrapper">
                          <h2>${item.title}</h2>
                          <a href="${item.url}"></a>
                          <img style="margin-top: 10px;" width="100%" height="100%" src="${item.thumbnail_pic_s}" alt="">
                          <div class="extra-info">
                              <span class="author">${item.author_name}</span>
                              <span class="category">${item.category}</span>
                              <span class="date">${item.date}</span>
                              <span class="close">x</span>
                          </div>
                      </div>`;

      }
      $(".content").append(str);
      // 给 动态追加的dom 存放额外的数据
      // $(".content-wrapper").data("url",item.url);
    }
    goToDetails();
  }
  // 这样写可以吗
  // goToDetails();
  // 点击 跳转到详情页
  function goToDetails(){
    $(".content-wrapper").on('click',function(){
      // console.log($(this).data('url'));
      var url = $(this).children("a").attr("href");
      console.log(url);
      location.href=url;
      
    });
  }

  // 1. 没点击一次 都发请求了，这样耗流量。保存起来。
  // 2. 对事件做优化，刚刚，5分钟前，1小时前，2小时前
  // 3. 那个关闭按钮，阻止冒泡，并且移出。
  // 4. 有两张图的DOM 结构

  // 总结：swiper框架，jquery库，弹性布局，ajax访问网络请求，
  // 同源策略，跨域问题，定位等


  // 7中解决 跨域 问题方法 都需要后台配合
  // 浏览器要求的  同源策略

  // URI
  // 协议:// host : 端口号 /路径？key=value&key=value

  // http://127.0.0.1:5501
  // http://v.juhe.cn/toutiao/index
  //      218.11.2.68
  // file:///E: 
});